<template>
  <div class="container">
    <div class="editBook">
     <div class="card">
       <div class="tit">
          <img src="../../imgs/myClass.png" alt="" >
          <span >我的分类(5)</span>
       </div>
       <div class="content">
         <div class="active">全部</div>
         <div class="active">已读</div>
         <div>工具书 X</div>
         <div>历史书 X</div>
         <div>交互书 X</div>
       </div>
     </div>
     <div class="card">
       <div class="tit">
          <img src="../../imgs/bookClass.png" alt="" >
          <span >常用分类(14)</span>
       </div>
       <div class="other">
         <div>下午茶 +</div>
         <div>晨读 +</div>
         <div>少儿读物 +</div>
         <div>下午茶 +</div>
       </div>
       <p style="color:#CECECE;font-size:24rpx;margin-top:20rpx;text-align:center">没有找到合适的分类？试试下面这个功能吧</p>
        <navigator url="/pages/custombook/main">
          <div class="blueBtn">+ 自定义分类</div>
        </navigator>
     </div>
    </div>
  </div>
</template>

<script>
import tabBar from '../../components/tabbar'

export default {
  data () {
    return {

    }
  },
  components: {
    tabBar
  },
  computed: {

  },
  methods: {

  },

}
</script>

<style scoped lang="less">
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .editBook{
    width:100%;
    box-sizing: border-box;
    padding:32rpx;
    .card{
      width: 100%;
      background: #fff;
      border-radius:16rpx;
      padding:0 32rpx;
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom:20rpx;
      .tit{
        height: 66rpx;
        border-bottom:1rpx solid #EAEAEA;
        line-height: 66rpx;
        img{
          width:30rpx;
          height:30rpx;
          margin-right:4rpx;
          vertical-align:middle;
          margin-top:-4rpx;
        }
        span{
          color:#1387FF;
          font-size:26rpx;
        }
      }
      .content{
        padding:20rpx 0rpx;
        overflow: hidden;
        >div{
          width:146rpx;
          height:70rpx;
          line-height: 70rpx;
          text-align: center;
          margin-right:12rpx;
          margin-bottom:12rpx;
          background:#1387FF;
          border-radius:10rpx;
          color:#fff;
          float:left;
          &.active{
            background: 0;
            color:#1387FF
          }
        }
        >div:nth-of-type(4n){
          margin-right: 0;
        }
      }
      .other{
        padding:20rpx 0rpx 8rpx;
        overflow: hidden;
        border-bottom:1rpx solid #EAEAEA;
        >div{
          padding:0 18rpx 0 15rpx;
          height:70rpx;
          line-height: 70rpx;
          margin-right:12rpx;
          margin-bottom:12rpx;
          background:#E4F1FF;
          border-radius:10rpx;
          color:#1387FF;
          float:left;
        }

      }
      .blueBtn{
         width:202rpx;
         height:70rpx;
         line-height: 70rpx;
         text-align: center;
         color:#fff;
         background: #1387FF;
         font-size:28rpx;
         margin: 32rpx auto;
         border-radius:10rpx;
      }
    }
  }
}
</style>
